<template>
  <div class="w-full h-full flex flex-col">
    <ElConfigProvider size="small" :z-index="3000">
      <!-- 顶部导航栏容器 -->
      <HeaderContainer />
      <div class="flex flex-1 overflow-hidden">
        <!-- 左侧资源面板容器 -->
        <ResourcesContainer />
        <div class="flex flex-1 flex-col overflow-hidden">
          <div class="flex flex-1 flex-row flex-nowrapf">
            <!-- 中央画布播放器 -->
            <CanvasPlayer />
            <!-- 右侧属性设置面板 -->
            <AttributeContainer />
          </div>
          <!-- 底部轨道时间线容器 -->
          <TrackContainer />
        </div>
      </div>
    </ElConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { ElConfigProvider } from "element-plus";
import HeaderContainer from "@/components/container/HeaderContainer.vue";
import ResourcesContainer from "@/components/container/ResourcesContainer.vue";
import CanvasPlayer from "@/components/container/CanvasPlayer.vue";
import AttributeContainer from "@/components/container/AttributeContainer.vue";
import TrackContainer from "@/components/container/TrackContainer.vue";
</script>
